<style lang="less">
    @import 'admin.less';
</style>
<template>
    <div class="page_admin">
        <el-container style="height: 100vh">
            <el-aside class="admin_left"  width="auto">

                <el-menu class="el-menu-slide"
                         style="height: 100vh"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b"
                         v-model="menu_active"
                         :unique-opened="true"
                         :collapse-transition="true"
                         :default-active="menu_active" router
                         @select="onMenuSelect"
                         :collapse="isCollapse">

                    <div class="slide_top">
                        <div style="width:30px;height: 30px;">
                            <el-avatar :src="circleUrl" :size="30"/>
                        </div>
                        <span class="menu_top_text">Himq后台管理</span>
                    </div>
                    <el-menu-item index="admin_index" :route="{name:'admin_index'}">
                        <i class="el-icon-menu"></i>
                        <span slot="title">系统概览</span>
                    </el-menu-item>

                    <el-menu-item index="admin_setting" :route="{name:'admin_setting'}" >
                        <i class="el-icon-setting"></i>
                        <span slot="title">系统设置</span>
                    </el-menu-item>
                    <el-submenu index="auth">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">授权管理</span>
                        </template>

                        <el-menu-item index="admin_mqtt_auth" :route="{name:'admin_mqtt_auth'}" >
                            <i class="el-icon-user"></i>
                            <span slot="title">授权用户</span>
                        </el-menu-item>

                        <el-menu-item index="admin_device" :route="{name:'admin_device'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">授权设备</span>
                        </el-menu-item>

                        <el-menu-item index="admin_app" :route="{name:'admin_app'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">授权应用</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="session">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">会话管理</span>
                        </template>

                        <el-menu-item index="admin_session" :route="{name:'admin_session'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">在线会话</span>
                        </el-menu-item>

                        <el-menu-item index="admin_conn" :route="{name:'admin_conn'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">连接记录</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="message">
                        <template slot="title">
                            <i class="el-icon-s-comment"></i>
                            <span slot="title">消息管理</span>
                        </template>

                        <el-menu-item index="admin_retain" :route="{name:'admin_retain'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">保留消息</span>
                        </el-menu-item>

                        <el-menu-item index="admin_undelivered" :route="{name:'admin_undelivered'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">离线消息</span>
                        </el-menu-item>
                        <el-menu-item index="admin_push" :route="{name:'admin_push'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">推送记录</span>
                        </el-menu-item>
                    </el-submenu>


                    <el-menu-item index="admin_subscriber" :route="{name:'admin_subscriber'}" >
                        <i class="el-icon-menu"></i>
                        <span slot="title">订阅列表</span>
                    </el-menu-item>





                    <el-submenu index="debug">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span slot="title">调试工具</span>
                        </template>

                        <el-menu-item index="admin_debug_log" :route="{name:'admin_debug_log'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">实时日志</span>
                        </el-menu-item>

                        <el-menu-item index="admin_debug_cmd" :route="{name:'admin_debug_cmd'}" >
                            <i class="el-icon-menu"></i>
                            <span slot="title">指令列表</span>
                        </el-menu-item>
                    </el-submenu>


                </el-menu>
            </el-aside>

            <el-container class="admin_right">
                <el-header class="header">
                    <div class="header_menu">
                        <!--顶部开关 -->
                        <div>
                            <el-link :underline="false" @click="toggle" :icon="toggle_icon" class="toggle">
                            </el-link>
                        </div>

                        <!--                        右边菜单-->
                        <div class="admin_menu">
                            <el-dropdown trigger="click" style="margin-left: 5px">

                                <el-link class="right_link">
                                    <template slot="default">
                                        <p class="right_link">{{welcome}}:管理员<span><i
                                                class="el-icon-arrow-down el-icon--right"/></span></p>
                                    </template>
                                </el-link>
                                <el-dropdown-menu slot="dropdown" style="width: 120px;">
                                    <el-dropdown-item divided icon="el-icon-edit" @click.native="editPass">修改密码
                                    </el-dropdown-item>
                                    <el-dropdown-item divided @click.native="exit">
                                        <template slot="default">
                                            <i style="color: red" class="el-icon el-icon-remove-outline"/>
                                            <span>退出登录</span>
                                        </template>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <el-row :gutter="10" class="header_tabs">
                        <el-col :span="21" class="tabs">
                            <el-tabs
                                    v-model="tab_active"
                                    @tab-click="tab_click"
                                    type="card"
                                    @dblclick.native="refresh"
                                    @tab-remove="removeTab">
                                <el-tab-pane
                                        v-for="(item) in navTabs"
                                        :key="item.name"
                                        :label="item.title"
                                        :name="item.name"
                                        :closable="item.enableClose"
                                />
                            </el-tabs>
                        </el-col>


                        <el-col :span="3" class="tabs_action">

                            <el-dropdown trigger="click" style="margin-left: 5px">

                                <el-link :underline="false" class="tab_option">
                                    <template slot="default">
                                        <p class="right_link">选项卡操作<span><i class="el-icon-arrow-down el-icon--right"/></span>
                                        </p>
                                    </template>
                                </el-link>
                                <el-dropdown-menu slot="dropdown"
                                                  style="width: 180px;font-weight: bolder;font-size: 8px">
                                    <el-dropdown-item divided icon="el-icon-edit" @click.native="clearTab">关闭所有选项卡
                                    </el-dropdown-item>
                                    <el-dropdown-item divided icon="el-icon-edit" @click.native="clearOther">关闭其它选项卡
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </el-header>

                <el-main class="content">
                    <router-view :key="refresh_key+new Date().getMilliseconds()"/>
                </el-main>
                <el-footer>
                    <div style="background-color: white;color: #B2B9C0;text-align: center;line-height: 42px;font-weight: bolder;font-size: 10px">
                        版权所有:西安小码头软件科技
                    </div>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {logout} from "../api/himq_http";
    import {getTimeSeg} from "../comm/date_utils";
    import {mapState} from "vuex";

    export default {
        name: "AdminPage",
        data() {
            return {
                active: false,
                menu_active: 'admin_index',
                welcome: getTimeSeg(),
                isCollapse: false,
                toggle_icon: 'el-icon-s-fold',
                panel_title: '',
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                icon: 'el-icon-circle-plus-outline',
                refresh_key: false,
                navTabs: [],
            }
        },
        watch: {
            tabs: {
                handler: function (newV) {
                    console.log("newV ", newV)
                    this.navTabs = [...newV.values()]
                },
                deep: true
            },
            $route(){
                this.$store.commit("addTabs", {
                    name: this.$route.name,
                    title: this.$route.meta.title,
                    enableClose:this.$route.meta.closeEnable
                });

                this.$store.state.tab_active = this.$route.name;
            }
        },
        computed: {
            ...mapState({
                tabs: state => state.panelTab,
            }),
            tab_active: {
                get() {
                    return this.$store.state.tab_active;
                },
                set(v) {
                    this.$store.state.tab_active = v;
                },
            }
        },
        created() {
            this.navTabs = [...this.$store.state.panelTab.values()]
            this.tab_active = 'admin_index';
            this.$router.push({name:'admin_index'})
        },
        methods: {
            editPass() {
                this.$router.push({name:'admin_edit_password'})
                this.$store.state.tab_active = "admin_edit_password";
            },
            onMenuSelect(name) {
                this.menu_active = name;
                this.$store.state.tab_active = name;
                this.$router.push({name:name})
            },
            tab_click(tabComp) {
                this.menu_active = tabComp.name;
                this.$store.state.tab_active = tabComp.name;
                this.$router.push({name: tabComp.name});
            },
            exit() {
                logout({}).then(
                    resp => {
                        this.$toast({message: resp.message})
                        localStorage.removeItem("token");
                        this.$router.push({name: 'login'})
                    }, err => {
                        this.$toast({message: err.message})
                    }
                )
            },
            toggle() {
                this.isCollapse = !this.isCollapse;
                console.log("toggle");
            },

            removeTab(name) {
                this.$store.commit("removeTab", name);
                let temp = [...this.$store.state.panelTab.values()];
                let routName = temp[temp.length - 1].name;
                this.tab_active = routName;
                this.menu_active = routName;
                this.$router.push({name: routName});
            },

            //刷新选项卡
            refresh() {
                this.refresh_key = !this.refresh_key;
            },
            //
            // 关闭所有选项卡
            clearTab() {
                this.$store.commit("removeAllTab");
                this.$router.push({name: [...this.$store.state.panelTab.values()][0].name})
            },
            // 关闭所有选项卡
            clearOther() {
                //this.$store.commit("removeAllTab",{});
                this.$store.commit("removeOther");
            },
        }
    }
</script>